<template>
	<view class="serbox flex-row-center">
		<view :class="['labitem flex-center',obj.idx==0?'labitemact':'']" @click="labchange(0)">综合推荐</view>
		<!-- <view :class="['labitem flex-center',obj.idx==1?'labitemact':'']" @click="labchange(1)">
			<text>询盘量</text>
			<view class="updown flex-column-center">
				<image class="up" :src="`../../static/30_.png`" mode="aspectFill" @click="setsort"></image>
				<image class="down" :src="`../../static/31_.png`" mode="aspectFill" @click="setsort"></image>
			</view>
		</view> -->
		<view :class="['labitem flex-center',obj.idx==1?'labitemact':'']" @click="labchange(1)">
			<text>价格</text>
			<view class="updown flex-column-center">
				<image class="up" :src="`../../static/${obj.req.sort==1?'30':'30_'}.png`" mode="aspectFill" @click="setsort('sort',1)"></image>
				<image class="down" :src="`../../static/${obj.req.sort==2?'31':'31_'}.png`" mode="aspectFill" @click="setsort('sort',2)"></image>
			</view>
		</view>
		<view :class="['labitem flex-center',obj.idx==2?'labitemact':'']" @click="labchange(2)">
			<text>筛选</text>
			<image class="ricon" src="../../static/32.png" mode="aspectFill"></image>
		</view>
		
		
		<view v-if="obj.popshow" class="popbox flex-column">
			<view class="topheader" :style="{height:`${obj.wh.navHeight}px`}">
				<view class="status" :style="{height:`${obj.wh.statusBarHeight}px`}"></view>
				<view  class="navigation ju-between" :style="{height:`${obj.wh.navigationBarHeight}px`,width:`${obj.wh.custom.left}px`}">
					<text class="navt">筛选</text>
					<image class="closeicon" src="../../static/33.png" mode="aspectFill" @click="close"></image>
				</view>
			</view>
			<view class="contentbox pd30">
				<view class="selsbox w100 flex-row wrap mb30">
					<view class="sel_label selitem">目数</view>
					<view class="selitem pd10-row"><input style="width: 100%;height: 100%;" type="digit" maxlength="10" placeholder="请输入下限" v-model="obj.req.mesh_min"/></view>
					<view class="selitem pd10-row"><input style="width: 100%;height: 100%;" type="digit" maxlength="10" placeholder="请输入上限" v-model="obj.req.mesh_max"/></view>
				</view>
				<view class="selsbox w100 flex-row wrap mb30">
					<view class="sel_label selitem">丝径/mm</view>
					<view class="selitem pd10-row"><input style="width: 100%;height: 100%;" type="digit" maxlength="10" placeholder="请输入下限" v-model="obj.req.wire_diameter_min"/></view>
					<view class="selitem pd10-row"><input style="width: 100%;height: 100%;" type="digit" maxlength="10" placeholder="请输入上限" v-model="obj.req.wire_diameter_max"/></view>
				</view>
				<view class="selsbox w100 flex-row wrap mb30">
					<view class="sel_label selitem">长度/m</view>
					<view class="selitem pd10-row"><input style="width: 100%;height: 100%;" type="digit" maxlength="10" placeholder="请输入下限" v-model="obj.req.length_min"/></view>
					<view class="selitem pd10-row"><input style="width: 100%;height: 100%;" type="digit" maxlength="10" placeholder="请输入上限" v-model="obj.req.length_max"/></view>
				</view>
				<view class="selsbox w100 flex-row wrap mb30">
					<view class="sel_label selitem">宽度/m</view>
					<view class="selitem pd10-row"><input style="width: 100%;height: 100%;" type="digit" maxlength="10" placeholder="请输入下限" v-model="obj.req.width_min"/></view>
					<view class="selitem pd10-row"><input style="width: 100%;height: 100%;" type="digit" maxlength="10" placeholder="请输入上限" v-model="obj.req.width_max"/></view>
				</view>
				<view class="selsbox w100 flex-row wrap mb30">
					<view class="sel_label selitem">孔径/mm</view>
					<view class="selitem pd10-row" style="width: 66.7%;"><input style="width: 100%;height: 100%;" type="digit" maxlength="10" placeholder="请输入孔径" v-model="obj.req.aperture"/></view>
				</view>
				<view class="selsbox w100 flex-row wrap mb30" v-if="obj.config.industryType&&obj.config.industryType.length">
					<view class="sel_label selitem">用途行业</view>
					<view :class="['sel_item selitem',obj.conidx.tag_industry==i?'selitemactive':'']" v-for="(v,i) in obj.moreshows[0]?obj.config.industryType:obj.config.industryType.slice(0,4)" :key="i" @click="labelchange('tag_industry',i,v)">{{v.name}}</view>
					<view v-if="obj.config.industryType.length>4" class="more flex-row-center selitem" @click="obj.moreshows[0]=!obj.moreshows[0]">
						<text>{{obj.moreshows[0]?'收起':'更多'}}</text>
						<image v-if="obj.moreshows[0]" class="upicon" src="../../static/30.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="selsbox w100 flex-row wrap mb30" v-if="obj.config.materialType&&obj.config.materialType.length">
					<view class="sel_label selitem">材质</view>
					<view :class="['sel_item selitem',obj.conidx.material==i?'selitemactive':'']" v-for="(v,i) in obj.moreshows[1]?obj.config.materialType:obj.config.materialType.slice(0,4)" :key="i" @click="labelchange('material',i,v)">{{v.name}}</view>
					<view v-if="obj.config.materialType.length>4" class="more flex-row-center selitem" @click="obj.moreshows[1]=!obj.moreshows[1]">
						<text>{{obj.moreshows[1]?'收起':'更多'}}</text>
						<image v-if="obj.moreshows[1]" class="upicon" src="../../static/30.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="selsbox w100 flex-row wrap mb30" v-if="obj.config.prolabelType&&obj.config.prolabelType.length">
					<view class="sel_label selitem">产品标签</view>
					<view :class="['sel_item selitem',obj.conidx.tag_product==i?'selitemactive':'']" v-for="(v,i) in obj.moreshows[3]?obj.config.prolabelType:obj.config.prolabelType.slice(0,4)" :key="i" @click="labelchange('tag_product',i,v)">{{v.name}}</view>
					<view v-if="obj.config.prolabelType.length>4" class="more flex-row-center selitem" @click="obj.moreshows[3]=!obj.moreshows[3]">
						<text>{{obj.moreshows[3]?'收起':'更多'}}</text>
						<image v-if="obj.moreshows[3]" class="upicon" src="../../static/30.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="pd30"><button class="button base-bg w-color" @click="confirm">搜索</button></view>
		</view>
	</view>
</template>

<script setup>
    import { reactive, getCurrentInstance,onMounted } from 'vue'
	import { onLoad,onTabItemTap,onReachBottom,onPullDownRefresh,onPageScroll } from '@dcloudio/uni-app';
    let { proxy } = getCurrentInstance()
	
	let obj = reactive({
		wh: proxy.$c.getglobal(),
		idx: 0,
		config: null,
		req: {
			sort: 0,
			tag_industry: '',
			material: '',
			tag_product: '',
			aperture: '',
			mesh_min: '',
			mesh_max: '',
			wire_diameter_min: '',
			wire_diameter_max: '',
			length_min: '',
			length_max: '',
			width_min: '',
			width_max: '',
		},
		popshow: false,
		conidx: [null,null,null,null],
		moreshows: {
			tag_industry: false,
			material: false,
			mesh: false,
			tag_product: false
		}
	})
	
	onMounted(async()=>{
		obj.config = await proxy.$c.setConfig()
	})
	
	const labchange=(idx)=>{
		obj.idx = idx
		if(idx==0){
			obj.req = {
				sort: 0,
				tag_industry: '',
				material: '',
				tag_product: '',
				aperture: '',
				mesh_min: '',
				mesh_max: '',
				wire_diameter_min: '',
				wire_diameter_max: '',
				length_min: '',
				length_max: '',
				width_min: '',
				width_max: '',
			}
			proxy.$emit('searchs',obj.req)
		}else if(idx==1){
			if(obj.req.sort==0){
				obj.req.sort = 1
			}
			proxy.$emit('searchs',obj.req)
		}else if(idx==2){
			if(obj.config){
				obj.popshow = true
			}else{
				this.$c.Toast('配置信息缺失！');
			}
		}
	}
	
	const setsort=(key,sort)=>{
		obj.req[key] = obj.req[key]==sort?0:sort
		proxy.$emit('searchs',obj.req)
	}
	
	const labelchange=(key,idx,v)=>{
		obj.conidx[key] = obj.conidx[key]==idx?null:idx
		obj.req[key] = obj.req[key]==v.name?'':v.name
	}
	
	const confirm=()=>{
		obj.popshow = false
		proxy.$emit('searchs',obj.req)
	}
	
	const close=()=>{
		obj.popshow = false
	}
</script>

<style lang="scss" scoped>
	.serbox{
		width: 100%; height: 68rpx;
		.labitem{
			flex: 1;height: 68rpx;margin-right: 10rpx;border-radius: 68rpx;border: 2rpx solid #E7E7E7;box-sizing: border-box;
			font-size: 29rpx;color: #333;
			.updown{
				margin-left: 10rpx;
				image{width: 24rpx;height: 18rpx;}
			}
			.ricon{width: 30rpx;height: 30rpx;margin-left: 10rpx;}
		}
		.labitem:last-child{margin-right: 0;}
		.labitemact{border: 2rpx solid #000000;font-weight: bold;}
	}
	.popbox{
		position: fixed;left: 0;top: 0;z-index: 100;width: 100vw;height: 100vh;background-color: #fff;
		.topheader{
			width: 100vw;
			.status{width: 100vw;}
			.navigation{
				width: 100vw;
				padding: 0 30rpx;box-sizing: border-box;
				display: flex;flex-direction: row;align-items: center;
				.navt{font-size: 32rpx;color: #333;}
				.closeicon{width: 36rpx;height: 36rpx;}
			}
		}
		.contentbox{
			width: 100vw;flex: 1;overflow-y: auto;
			.selsbox{
				position: relative;
				border-top: 2rpx solid #E5E5E5;
				border-right: 2rpx solid #E5E5E5;
				border-left: 2rpx solid #E5E5E5;
				box-sizing: border-box;
				.selitem{
					position: relative;
					width: 33.3%;height: 114rpx;
					display: flex;align-items: center;justify-content: center;font-size: 30rpx;
					border-right: 2rpx solid #E5E5E5;
					border-bottom: 2rpx solid #E5E5E5;
					box-sizing: border-box;
				}
				.selitem:nth-child(3n){border-right: none;}
				.sel_label{background: #E9E9E9;font-weight: bold;color: #333333;}
				.sel_item{color: #333333;z-index: 10;position: relative;}
				.more{color: #1773E5;.upicon{width: 30rpx;height: 30rpx;margin-left: 10rpx;}}
				.selitemactive{color: #1773E5;background: linear-gradient( 180deg, #FFFFFF 0%, #E5F2FE 100%);}
				.selitemactive::before{
					content: '';display: block;
					position: absolute;z-index: 1;width: 100%;height: 100%;border-radius: 8rpx;border: 2rpx solid #1773E5;
				}
			}
			.selsbox::after{
				content: '';display: block;
				position: absolute;left: 0;bottom: 0;z-index: 1;width: 100%;height: 2rpx;background-color: #E5E5E5;
			}
		}
		.button{
			width: 100%;height: 100rpx;border-radius: 100rpx;text-align: center;line-height: 100rpx;font-size: 26rpx;
		}
	}
</style>